<template>
    <view class="container">
        <view class="head">
            <image
                :src="
                    indexInfo.SupplierLogo
                        ? easyGetImgUrl(indexInfo.SupplierLogo)
                        : '/pages_supplier/static/defaultLogo.png'
                "
                mode="aspectFill"></image>
            <view class="user">
                <view class="name">{{ indexInfo.SupplierName }}</view>
                <view class="tel">{{ indexInfo.ContactName }}</view>
            </view>
            <view class="abs">
                <view class="messageiconRel">
                    <iconsfont
                        @click="goUrl('/pages_supplier/packet/message/index')"
                        customIcons="icon-xiaoxi"
                        class="icon"
                        size="40">
                    </iconsfont>
                    <view class="dot" v-if="docView"></view>
                </view>
                <iconsfont
                    @click="goUrl('/pages_supplier/packet/setting/index')"
                    customIcons="icon-shezhi"
                    class="icon"
                    size="40">
                </iconsfont>
            </view>
            <view class="cut" v-if="datas && datas.length > 1" @click="cutshow">
                <image src="/pages_supplier/static/qiehuan.png"></image>
                <view>切换</view>
            </view>
        </view>
        <view class="main">
            <view class="account">
                <view class="title">账户总览</view>
                <view class="account_list">
                    <view v-if="CountList[0]">
                        <view>{{ CountList[0].SumPrice }}</view>
                        <text>{{ CountList[0].Title }}</text>
                    </view>
                    <view v-if="CountList[1]">
                        <view>{{ CountList[1].SumPrice }}</view>
                        <text>{{ CountList[1].Title }}</text>
                    </view>
                    <view v-if="CountList[2]">
                        <view>{{ CountList[2].SumPrice }}</view>
                        <text>{{ CountList[2].Title }}</text>
                    </view>
                </view>
            </view>
            <view class="main_box">
                <view class="box_title">待办事项</view>
                <view class="box_list">
                    <view v-for="(item, index) in ToDoList" :key="index" @click="clickToDoMenu(item)">
                        <image :src="getToDoIcon(item)" mode="aspectFill"></image>
                        <view>{{ item.FunctionName }}</view>
                        <uni-badge
                            type="error"
                            v-if="item.Count > 0"
                            :customStyle="{ background: '#DB0032' }"
                            class="badge"
                            size="small"
                            :text="item.Count"></uni-badge>
                    </view>
                </view>
            </view>
            <view class="main_box">
                <view class="box_title">其他服务</view>
                <view class="box_list">
                    <view v-for="(item, index) in OtherList" :key="index" @click="clickOtherMenu(item)">
                        <image :src="getOtherIcon(item)" mode="aspectFill"></image>
                        <view>{{ item.FunctionName }}</view>
                        <uni-badge
                            type="error"
                            v-if="item.Count > 0"
                            :customStyle="{ background: '#DB0032' }"
                            class="badge"
                            size="small"
                            :text="item.Count"></uni-badge>
                    </view>
                </view>
            </view>
        </view>
        <app-version :isAutoCheck="true" :appId="getAppId()"></app-version>
        <pop-check-cut ref="popCheckCut" :datas="datas" @selected="selected"></pop-check-cut>
    </view>
</template>
<script>
import { mapMutations, mapState } from "vuex"
import { GetSupplierIndex, GetAdminUserSystemList, GetMessageAlertList } from "@/pages_supplier/service/api/supplier.js"
import { Login } from "@/pages_supplier/service/api/authorize.js"
import storage from "@/uni-sub-base/utils/storage.js"
import appVersion from "@/uni-sub-base/module/version/app-version.vue"
import { FunctionCode } from "@/pages_supplier/type/functionCode.js"
import popCheckCut from "@/uni-sub-base/module/cutAccount/cut-account.vue"
import defaultLogo from "@/uni-sub-base/module/cutAccount/icon_cut_default_logo.png"
export default {
    components: {
        appVersion,
        popCheckCut,
    },
    data() {
        return {
            indexInfo: {},
            CountList: [],
            ToDoList: [],
            OtherList: [],
            card1: {},
            card2: {},
            card3: {},
            datas: [],
            docView: false,
        }
    },
    mounted() {
        this.getAdminUserSystemList()
    },
    onShow() {
        this.getIndex()
        this.getMessage()
    },
    methods: {
        ...mapMutations(["SET_AUTH"]),
        getMessage() {
            let param = {}
            param.pageSize = 50
            param.pageIndex = 1
            param.readFlag = 0
            let path = "?pageSize=" + param.pageSize + "&pageIndex=" + param.pageIndex + "&readFlag=0"
            GetMessageAlertList(param, path).then((res) => {
                if (res.State == 1) {
                    if (res.Data.length > 0) {
                        this.docView = true
                    }
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        getAdminUserSystemList() {
            GetAdminUserSystemList().then((res) => {
                if (res.State == 1 && res.Data) {
                    this.datas = res.Data
                }
            })
        },
        selected(item) {
            this.loginByAccount(item)
        },
        loginByAccount(item) {
            uni.showLoading({
                title: "切换中",
            })
            let param = {
                type: 1,
                shopId: item.ShopId,
                userId: item.UserId,
            }
            Login(param).then((res) => {
                if (res.State == 1 && res.Data) {
                    let token = res.Data.Token
                    this.SET_AUTH(token)
                    storage.setCache("token", token)
                    storage.setCache("SupplierId", res.Data.SupplierId)
                    storage.setCache("SupplierName", res.Data.SupplierName)
                    uni.hideLoading()
                    storage.removeCache("webInfo")
                    this.easyReLaunch("/pages_supplier/packet/index/index")
                } else {
                    uni.hideLoading()
                    this.easyToast(res.Msg)
                }
            })
        },
        cutshow() {
            this.$refs.popCheckCut.openPop()
        },
        goUrl(url) {
            this.easyGoTo(url)
        },
        getIndex() {
            GetSupplierIndex().then((res) => {
                if (res.State == 1) {
                    this.indexInfo = res.Data
                    this.CountList = res.Data.CountList
                    console.log(this.CountList)
                    if (res.Data.MenuList && res.Data.MenuList.length > 0) {
                        let toDoObj = res.Data.MenuList.find((e) => {
                            return e.FunctionType == 1
                        })
                        let otherObj = res.Data.MenuList.find((e) => {
                            return e.FunctionType == 0
                        })
                        //待办事项
                        if (toDoObj && toDoObj.List) {
                            this.ToDoList = toDoObj.List
                        }
                        //其他服务
                        if (otherObj && otherObj.List) {
                            this.OtherList = otherObj.List
                        }
                    }
                    //账户总览
                    // this.CountList.forEach((e, i) => {
                    // 	if (e.State == 15) {
                    // 		this.card1 = e
                    // 	}
                    // 	if (e.State == 16) {
                    // 		this.card2 = e
                    // 	}
                    // 	if (e.State == 17) {
                    // 		this.card3 = e
                    // 	}
                    // })
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        //获取代办对应icon
        getToDoIcon(item) {
            let icon = ""
            switch (item.FunctionCode) {
                case FunctionCode.Order_Receive:
                    icon = "/pages_supplier/static/icon/backlog1.png"
                    break
                case FunctionCode.Order_Send:
                case FunctionCode.Order_Send_Supply:
                    icon = "/pages_supplier/static/icon/backlog2.png"
                    break
                case FunctionCode.Confirm_Receipt:
                case FunctionCode.Confirm_Receipt_Supply:
                    icon = "/pages_supplier/static/icon/backlog5.png"
                    break
                case FunctionCode.Return_Order_Review:
                    icon = "/pages_supplier/static/icon/backlog3.png"
                    break
                case FunctionCode.Return_Order_Receive:
                    icon = "/pages_supplier/static/icon/backlog4.png"
                    break
                case FunctionCode.Settlement_Review:
                case FunctionCode.Settlement_Review_Supply:
                    icon = "/pages_supplier/static/icon/backlog6.png"
                    break
                case FunctionCode.Settlement_To_Pay:
                    icon = "/pages_supplier/static/icon/backlog7.png"
                    break
                default:
                    break
            }

            return icon
        },
        //获取其他对应icon
        getOtherIcon(item) {
            let icon = ""
            console.log(item.FunctionCode)
            switch (item.FunctionCode) {
                case FunctionCode.Print_Order:
                    icon = "/pages_supplier/static/icon/other1.png"
                    break
                case FunctionCode.Product_Management:
                    icon = "/pages_supplier/static/icon/other2.png"
                    break
                case FunctionCode.Quotation_Sheet:
                    icon = "/pages_supplier/static/icon/other3.png"
                    break
                case FunctionCode.Quotation_Review:
                    icon = "/pages_supplier/static/icon/other4.png"
                    break
                case FunctionCode.Settlement:
                case FunctionCode.Initiate_Settlement:
                    icon = "/pages_supplier/static/icon/other5.png"
                    break
                case FunctionCode.Transaction_Settlement:
                    icon = "/pages_supplier/static/icon/other6.png"
                    break
                case FunctionCode.BuyOrder:
                case FunctionCode.Order:
                    icon = "/pages_supplier/static/icon/other7.png"
                    break
                case FunctionCode.Return_Order:
                    icon = "/pages_supplier/static/icon/other8.png"
                    break
                case FunctionCode.Add_Product:
                    icon = "/pages_supplier/static/icon/other9.png"
                    break
                case FunctionCode.Supply_Order:
                    icon = "/pages_supplier/static/icon/other10.png"
                    break
                case FunctionCode.Freight_Template:
                    icon = "/pages_supplier/static/icon/other11.png"
                    break
                case FunctionCode.MemberGradePrice:
                    icon = "/pages_supplier/static/icon/other12.png"
                    break
                default:
                    break
            }

            return icon
        },
        //点击菜单
        clickToDoMenu(item) {
            let url = ""
            switch (item.FunctionCode) {
                case FunctionCode.Order_Receive:
                    url = "/pages_supplier/packet/order/index?tabIndex=1"
                    break
                case FunctionCode.Order_Send:
                    url = "/pages_supplier/packet/order/index?tabIndex=2"
                    break
                case FunctionCode.Order_Send_Supply:
                    //TODO
                    url = "/pages_supplier/packet/supplyOrder/index?tabIndex=1"
                    break
                case FunctionCode.Confirm_Receipt:
                    url = "/pages_supplier/packet/accountBuy/comeAndGo?tabIndex=3&settlementType=0"
                    break
                case FunctionCode.Return_Order_Review:
                    url = "/pages_supplier/packet/returnOrder/index?tabIndex=1"
                    break
                case FunctionCode.Return_Order_Receive:
                    url = "/pages_supplier/packet/returnOrder/index?tabIndex=2"
                    break
                case FunctionCode.Settlement_Review:
                    url = "/pages_supplier/packet/accountBuy/comeAndGo?tabIndex=1&settlementType=1"
                    break
                case FunctionCode.Settlement_Review_Supply:
                    url = "/pages_supplier/packet/account/comeAndGo?tabIndex=1&settlementType=1"
                    break
                case FunctionCode.Confirm_Receipt_Supply:
                    //TODO
                    url = "/pages_supplier/packet/account/comeAndGo?tabIndex=3&settlementType=0"
                    break
                case FunctionCode.Settlement_To_Pay:
                    url = "/pages_supplier/packet/accountBuy/comeAndGo?tabIndex=2&settlementType=1"
                    break
                default:
                    break
            }
            this.easyGoTo(url)
        },
        clickOtherMenu(item) {
            let url = ""

            switch (item.FunctionCode) {
                case FunctionCode.BuyOrder:
                    url = "/pages_supplier/packet/order/index"
                    break
                case FunctionCode.Print_Order:
                    url = "/pages_supplier/packet/outOrder/list"
                    break
                case FunctionCode.Product_Management:
                    url = "/pages_supplier/packet/productManage/index"
                    break
                case FunctionCode.Quotation_Sheet:
                    url = "/pages_supplier/packet/quotation/index"
                    break
                case FunctionCode.Quotation_Review:
                    url = "/pages_supplier/packet/quotation/examine"
                    break
                case FunctionCode.Settlement:
                    //TODO 结算
                    url = "/pages_supplier/packet/account/comeAndGo"
                    break
                case FunctionCode.Initiate_Settlement:
                    url = "/pages_supplier/packet/accountBuy/launch"
                    break
                case FunctionCode.Transaction_Settlement:
                    url = "/pages_supplier/packet/accountBuy/comeAndGo"
                    break
                case FunctionCode.Order:
                    url = "/pages_supplier/packet/supplyOutOrder/list"

                    break
                case FunctionCode.Return_Order:
                    url = "/pages_supplier/packet/returnOrder/index"
                    break
                case FunctionCode.Add_Product:
                    url = "/pages_supplier/packet/addProduct/index"
                    break
                case FunctionCode.Supply_Order:
                    //TODO 供应订单
                    url = "/pages_supplier/packet/supplyOrder/index"
                    break
                case FunctionCode.Freight_Template:
                    //TODO 运费模板
                    url = "/pages_supplier/packet/freightTemplate/index"
                    break
                case FunctionCode.MemberGradePrice:
                    //TODO 运费模板
                    url = "/pages_supplier/packet/vipPrice/index"
                    break
                default:
                    break
            }
            this.easyGoTo(url)
        },
    },
}
</script>

<style lang="scss">
.head {
    height: 294rpx;
    background: $app-color-main;
    padding: 128rpx 36rpx 0 36rpx;
    position: relative;
    display: flex;

    image {
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
        border-radius: 50%;
    }

    .user {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-around;
        height: 120rpx;

        .name {
            font-size: 40rpx;
            color: #ffffff;
        }

        .tel {
            font-size: 28rpx;
            color: #ffffff;
        }
    }

    .icon {
        height: 40rpx;
        padding: 15rpx 0 15rpx 30rpx;
        color: #ffffff;
        margin-left: 10rpx;
    }
}

.main {
    padding: 0 24rpx;
    margin-top: -126rpx;
    position: relative;
}

.account {
    background: #ffffff;
    border-radius: 12rpx;
    padding-bottom: 28rpx;
    margin-bottom: 24rpx;

    .title {
        padding: 28rpx 40rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: $color-gray-1;
    }

    .account_list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #222a42;
        font-size: 32rpx;
        font-weight: bold;

        & > view {
            text-align: center;
        }

        text {
            font-weight: normal;
        }
    }
}

.main_box {
    background: #ffffff;
    border-radius: 12rpx;
    margin-bottom: 24rpx;

    .box_title {
        color: $color-gray-1;
        font-size: 32rpx;
        font-weight: bold;
        padding: 24rpx 40rpx;
    }

    .box_list {
        display: flex;
        padding: 0 24rpx;
        flex-wrap: wrap;
        justify-content: flex-start;

        & > view {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 25%;
            position: relative;

            .badge {
                position: absolute;
                right: 25rpx;
                top: 5rpx;
            }

            image {
                width: 58rpx;
                height: 56rpx;
                display: block;
                margin: 22rpx 0 12rpx 0;
            }

            view {
                color: #222a42;
                font-size: 24rpx;
                padding-bottom: 24rpx;
            }
        }
    }
}

.cut {
    color: #ffffff;
    font-size: 24rpx;
    display: flex;
    padding-top: 30rpx;

    image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 12rpx;
    }
}

.abs {
    position: absolute;
    right: 28rpx;
    top: 80rpx;
    display: flex;
    align-items: center;
}
.messageiconRel {
    position: relative;
    .dot {
        width: 8rpx;
        height: 8rpx;
        border-radius: 50%;
        background: #ffffff;
        position: absolute;
        right: -10rpx;
        top: 0;
    }
}
.pop-check-cut-box {
    width: 686rpx;
    background: #f5f5f5;
    border-radius: 32rpx;

    .cut-title {
        display: flex;
        justify-content: center;
        position: relative;
        top: -20rpx;

        .title-left {
            width: 0;
            height: 0;
            border-bottom: 20rpx solid $app-color-main;
            border-left: 10rpx solid transparent;
            position: relative;
        }

        .title-left::after {
            content: "";
            position: absolute;
            left: -10rpx;
            width: 0;
            height: 0;
            border-bottom: 20rpx solid rgba(0, 0, 0, 0.15);
            border-left: 10rpx solid transparent;
        }

        .title-center {
            width: 562rpx;
            height: 80rpx;
            background: $app-color-main;
            border-radius: 0px 0px 24rpx 24rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            color: #ffffff;
        }

        .title-right {
            width: 0;
            height: 0;
            border-bottom: 20rpx solid $app-color-main;
            border-right: 10rpx solid transparent;
            position: relative;
        }

        .title-right::after {
            content: "";
            position: absolute;
            right: -10rpx;
            width: 0;
            height: 0;
            border-bottom: 20rpx solid rgba(0, 0, 0, 0.15);
            border-right: 10rpx solid transparent;
        }
    }

    .scroll-box {
        max-height: 450rpx;

        .cut-list {
            padding: 18rpx 24rpx 0rpx;

            & > view {
                height: 188rpx;
                background: #ffffff;
                border-radius: 16rpx;
                padding: 0 32rpx 0 24rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 32rpx;
            }

            .cut-left {
                display: flex;
            }

            .cut-right {
                display: flex;
                align-items: center;

                .line {
                    width: 24rpx;
                    height: 2rpx;
                    background: $color-gray-1;
                }

                .shape {
                    width: 0;
                    height: 0;
                    border-top: 12rpx solid transparent;
                    border-left: 24rpx solid $color-gray-1;
                    border-bottom: 12rpx solid transparent;
                }
            }
        }

        image {
            width: 108rpx;
            height: 108rpx;
            border-radius: 20rpx;
            margin-right: 24rpx;
        }

        .cut-name {
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            view:first-child {
                font-size: 32rpx;
                font-weight: bold;
                color: $color-gray-1;
            }

            view:last-child {
                font-size: 28rpx;
                color: $color-gray-3;
            }
        }
    }
}
</style>
